<template>
<div class="navbar_con clearfix">
    <div class="navbar_container">
        <div class="navbar clearfix">
            <div class="subnav_con fl">
                <h1>全部商品分类</h1>
                <span v-if="isEnableSpan"></span>
                <classList v-if="isEnableSpan" :class="['subnav']"></classList>
            </div>
            <ul class="navlist fl">
                <li v-for="item in navList" :key="item.key">
                    <a :class=item.class>{{ item.title }}</a>
                </li>
            </ul>
        </div>
    </div>
</div>
</template>

<script>
import classList from "../common/ClassList.vue"

export default {
    name: 'NavBar',
    components:{
        classList
    },
    props:{
        isEnableSpan:{
            type: Boolean,
            default: false,
        }
    },
    data(){
        return {
            navList:[
                 {"title":"首页","class":"text","key":"1"},
                 {"title":"|","class":"interval","key":"2"},
                 {"title":"手机生鲜","class":"text","key":"3"},
                 {"title":"|","class":"interval","key":"4"},
                 {"title":"抽奖","class":"text","key":"5"},
            ]
        }
    }
}
</script>

<style>
.navbar_con{
    height:40px;
    border-bottom:2px solid #39a93e;
}

.navbar_container{
    margin-left: 250px;
    margin-right: 250px;
    height:40px;
}

.navbar{
    width:auto;
}

.navbar h1{
    width:200px;
    height:40px;
    line-height:40px;
    text-align: center;
    font-size:14px;
    color:#fff;
    background-color:#39a93e; 
    font-weight:bold
}

.navbar .subnav_con{width:200px;height:40px;background-color:#39a93e;position:relative;}

.navbar .subnav_con h1{position:absolute;left:0;top:0;text-align:center;}
.navbar .subnav_con span{display:block;width:16px;height:9px;background:url(../../assets/images/down.png) no-repeat;position:absolute;right:27px;top:16px;transition:all 300ms ease-in;}

.navbar .subnav_con:hover span{transform:rotateZ(180deg)}
.navbar .subnav_con:hover .subnav{display:block;}

.navbar .subnav_con .subnav{position:absolute;left:0;top:40px;display:none; border-top:2px solid  #39a93e;}

.navlist { margin-left:34px; }
.navlist li{height:40px;float:left;line-height:40px;cursor:pointer;}
.navlist li a{color:#666;font-size:14px;}
.navlist li a:hover{color:#ff8800}
.navlist .interval{margin:0 15px;}
</style>